<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 设置字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 适应移动设备，设置视口宽度等于设备宽度，初始缩放比例为 1.0 -->
    <title>Document</title>
    <style>
      
      span {
        display: inline-block;
        /* 将 span 元素设置为行内块级元素，可设置宽高 */
        border-radius: 50%;
        /* 设置边框半径为 50%，使其变为圆形 */
        height: 100px;
        /* 设置高度为 100 像素 */
        width: 100px;
        /* 设置宽度为 100 像素 */
        opacity: 0.2;
        /* 设置不透明度为 0.2，使其半透明 */
      }
      .light {
        opacity: 1;
        /* 设置拥有 light 类的元素不透明度为 1，完全不透明 */
      }
      #red {
        background-color: red;
        /* 设置 id 为 red 的元素背景颜色为红色 */
      }
      #yellow {
        background-color: yellow;
        /* 设置 id 为 yellow 的元素背景颜色为黄色 */
      }
      #green {
        background-color: green;
        /* 设置 id 为 green 的元素背景颜色为绿色 */
      }
    </style>
  </head>
  <body>
    <span id="red" class="light"></span>
    <!-- 创建一个 id 为 red 且带有 light 类的圆形 span 元素，背景为红色且完全不透明 -->
    <span id="yellow"></span>
    <!-- 创建一个 id 为 yellow 的圆形 span 元素，背景为黄色且半透明 -->
    <span id="green"></span>
    <!-- 创建一个 id 为 green 的圆形 span 元素，背景为绿色且半透明 -->
    <p id="sp" style="font-size: 50px; font-weight: bold">1</p>
    <!-- 创建一个 id 为 sp 的段落元素，字体大小为 50 像素，字体加粗，内容为 1 -->


    
    <script>
      var maxS = 10;
      // 定义变量 maxS 并初始化为 10，表示最大秒数
      var currentlight = "red";
      // 定义变量 currentlight 并初始化为 "red"，表示当前亮着的灯颜色为红色
      function changeLight(from, to, s) {
        if (maxS > 0) {
          return;
        }
        // 如果 maxS 大于 0，直接返回，不执行后续操作
        maxS = s;
        // 将参数 s 赋值给 maxS，表示新的秒数
        currentlight = to;
        // 将参数 to 赋值给 currentlight，表示新的亮着的灯颜色
        document.getElementById(from).classList.remove("light");
        // 通过 id 获取元素并移除 light 类，使其不透明变为半透明
        document.getElementById(to).classList.add("light");
        // 通过 id 获取元素并添加 light 类，使其半透明变为完全不透明
      }
      window.setInterval(function () {
        if (currentlight == "red") {
          changeLight("red", "yellow", 8);
        }
        // 如果当前亮着的灯是红色，调用 changeLight 函数切换到黄色，时间为 8 秒
        if (currentlight == "yellow") {
          changeLight("yellow", "green", 3);
        }
        // 如果当前亮着的灯是黄色，调用 changeLight 函数切换到绿色，时间为 3 秒
        if (currentlight == "green") {
          changeLight("green", "red", 8);
        }
        // 如果当前亮着的灯是绿色，调用 changeLight 函数切换到红色，时间为 8 秒
        maxS = maxS - 1;
        // 每秒钟将 maxS 减 1
        document.getElementById("sp").innerText = maxS;
        // 更新段落元素的文本内容为当前剩余秒数
      }, 1000);
      // 每隔 1000 毫秒（1 秒）执行一次上述匿名函数
    </script>
  </body>
</html>
aaaa